<template>
    <div class="header">
        <div class="trademark">
            <img :src="this.$route.query.ImageUrl" alt="" class="tradePhoto">
        </div>
        <div class="intro">
            <div class="name">{{ msg.name }}</div>
            <div class="score">{{ msg.score }}分  <span>约{{ msg.delivery_time }}分钟</span></div>
            <div class="phone">📞:{{ msg.phone_number }}</div>
            <div class="time">营业时间:<span>{{ msg.timeOnSale.start }}:00~{{ msg.timeOnSale.end }}:00</span></div>
            <div class="welfare">红包:{{ msg.welfare }}</div>
        </div>
    </div>
</template>

<script>
import { useRoute } from 'vue-router';
export default {
    name:'MarketHeader',
    setup(){
      const route = useRoute()
      let msg = JSON.parse(route.query.obj)
      return {
        msg
      }
    }
}
</script>

<style scoped>
    .header {
      display: flex;
      background-color: rgb(237, 224, 224);
      border-radius: 10px;
      min-width: 500px;
    }
    .trademark {
      width: 20%;
      margin: 20px;
    }
    .tradePhoto {
      border-radius: 50%;
      height: auto;
      width: 100%;
      border: 3px solid white;
    }
    .intro {
      margin: 20px;
    }
</style>